<template>
	<div class="mobile-title-container" id="mobile-title">
		<img v-show="!['im'].includes(type)" src="../../assets/img/back.png" alt="" srcset="" width="18px" class="back" @click="goBack" />
		<p class="mobile-title-header">
			<span v-if="['im'].includes(type)" class="dot"></span>
			<span class="mobile-title-text">{{ title }}</span>
			<img v-if="['audio', 'video'].includes(type)" :src="type === 'video' ? video : audio" alt="" width="14px" />
			<img v-if="['im'].includes(type)" src="../../assets/img/hangup.png" alt="" srcset="" width="24px" class="hangup" @click="hangup" />
		</p>
	</div>
</template>

<script>
import zcoIMEvent from '@/store/event';
import IMstate from '../../store/imState.js';
export default {
	data() {
		return {
			title: IMstate.mobileTitle,
			video: require('../../assets/img/video.png'),
			audio: require('../../assets/img/audio.png'),
			type: '', // im | video | audio
		};
	},
	methods: {
		goBack() {
			zcoIMEvent.updateColesImChatMessage(false);
		},
		hangup() {
			zcoIMEvent.requestHangup();
		}
	},
	mounted() {
		zcoIMEvent.onUpdatMobileTitle(data => {
			const { title, type } = data || {};
			this.title = title;
			this.type = type;
		});
	}
};
</script>

<style scoped>
.mobile-title-container {
	width: 100%;
	height: 44px;
	background: #f3f3f3;
	position: relative;
}
.mobile-title-container .back {
	position: absolute;
	top: 13px;
	left: 16px;
	cursor: pointer;
}
.mobile-title-text {
	font-size: 15px;
	font-weight: 400;
	color: #141414;
	padding-right: 8px;
}
.mobile-title-header {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 12px 0;
}
.dot {
	width: 8px;
	height: 8px;
	background: #64caab;
	border-radius: 50%;
	margin-right: 6px;
}
.hangup {
	position: absolute;
	right: 16px;
	width: 24px;
	height: 24px;
}
</style>
